<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {/*定义div元素样式*/
            margin: 20px;
            border: solid 1px blue;
            font-size: 18px;
        }
    </style>

    <script>
        //基础设计代码
        function bubble(){
            var div = document.getElementsByTagName('div')//div变量就是所有的div标签，是一个数组
            var show = document.getElementById("show")//show变量就是p标签

            for(var i = 0; i<div.length; ++i){                       //遍历div元素数组，给每一个div分配onclick属性（基础设置代码结束）
                //响应式设计代码
                div[i].onclick = (function(i){                      //div元素点击后，执行一个函数（不用命名变量和调用，onclick是内置属性）
                    if( document.getElementById("show").innerHTML !== '')
                    {
                        document.getElementById("show").innerHTML = ''
                    }
                    return function(){                              //函数的内容是给该div元素添加css样式，然后在p标签中依次显示
                        div[i].style.border = "1px dashed red"      //凡是出现div[i]的函数，都是访问了顶级作用域（windows作用域）的函数，也就是访问了父元素作用域的函数——闭包函数。
                        show.innerHTML += div[i].className + ">"    //闭包在最里层函数中出现，使得所有函数的i都是div中的i。点击div会同时给所有函数输入实参。
                    }
                })(i)   //这个i是onclick的顶层函数的参数。将onclick写成这种形式的意义是：每一次点击div，都会调用一次函数。声明的同时调用，这样比调用和声明分开写要简便。顶层i的意义是：点击的div的i值就是输入的参数值。

            }
        }
        window.onload = bubble;//进入window时执行bubble函数。

        /*首先进入窗口，执行bubble函数，定义变量，执行循环，给每一个div分配onclick属性
        如果我点击了div-3，那么首先执行顶层函数（调用第二个函数），输入一个i=3。
        然后执行第二个function函数，输入i=3到参数中，然后return第三层函数，即调用第三层函数，对div-3进行操作
        然后，由于div是嵌套的，里面的div同时也是外面的div，所以点击里面的div相当于同时点击所有1~3div，根据冒泡事件模型会从里到外依次执行，顺序反馈在p中*/
    </script>
</head>
<body>
    <div class="div-1">
        div-1
        <div class="div-2">
            div-2
            <div class="div-3">
                div-3
                <div class="div-4">
                    div-4
                    <div class="div-5">div-5</div>
                </div>
            </div>
        </div>
    </div>

    <p id="show"></p>
</body>
</html>